<template>

    <div class="contact-list">
        <el-scrollbar class="list-container">
            <div class="contact-item" v-for="f in friends" :key="index">
                <!-- 头像 -->
                 <el-avatar class="avatar" :size="40" src="https://img1.baidu.com/it/u=781435481,24052815&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></el-avatar>
                 <!-- <img src="../assets/avatar/avatar1.png" class="avatar" /> -->

                 <!-- 联系人名称 和 最后一条消息 -->
                 <div class="contact-info">
                    <div class="username">{{f.remark}}</div>
                    <div class="last-message">你好！</div>
                 </div>
                 <!-- 最后消息时间 -->
                  <div class="last-time">09：15</div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
import axios from '../api/axios'
import {ref} from 'vue'


    const userStr=localStorage.getItem('user')
    const u =userStr?JSON.parse(userStr):null
    const friends = ref(null)
    const get_friens = () => {
        axios.get('/get_friends',{
            params:{
                userId:u.id
            }
        }).then(res=>{
            friends.value=res.data.friends
        })
    }
    get_friens()
</script>



<style lang="scss" scoped>
    @use '../assets/contactList.scss'
</style>